<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <include file="./Public/Tpl/head.html" title="人员管理" description="药品管理系统." keywords="中南民族大学,药品管理系统"/>
</head>
<body>
<include file="./Public/Tpl/nav.html"/>
<div class="container">
  <div class="col-md-2">
    <div class="panel panel-default">
      <div class="panel-heading">功能</div>
      <div class="list-group list-menu">
        <button type="button" class="list-group-item list-menu active" data-to="0" data-toggle="tooltip" data-placement="right" title="管理员工信息" onclick="loadList(size,page)">人员列表
        </button>
        <button type="button" class="list-group-item list-menu" data-to="1">新增人员</button>
      </div>
    </div>
  </div>
  <div class="col-md-10">
    <div class="panel panel-default func" id="userList">
      <div class="panel-heading" style="text-align: center">在职职工</div>
      <table class="table table-hover">
        <thead>
        <tr>
          <th>职工号</th>
          <th>登录名</th>
          <th>姓名</th>
          <th>权限</th>
          <th>最后登录时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="info in list" data-toggle="modal" data-target="#userModal">
          <td>{{ info.id }}</td>
          <td>{{ info.username }}</td>
          <td>{{ info.realname }}</td>
          <td v-if="info.admin == 0">普通</td>
          <td v-else>管理员</td>
          <td>{{ info.lasttime }}</td>
        </tr>
        </tbody>
      </table>
      <div id="userPage" class="center">
        <nav>
          <ul class="pagination">
            <li v-for="i in count">
              <a href="javascript:" :data-to="i">{{ i }}</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="panel panel-default func">
      <div class="panel-heading" style="text-align: center">添加员工</div>
      <div class="panel-body">
        <div class="col-sm-7 col-sm-offset-2">
          <form id="addForm" class="form-horizontal" method="post">
            <div class="form-group">
              <label for="inputName2" class="col-sm-2 control-label">姓名</label>
              <div class="col-sm-10">
                <input name="realname" type="text" class="form-control" id="inputName2" autocomplete="off">
                <input name="do" type="hidden" value="addUser"/>
              </div>
            </div>
            <div class="form-group">
              <label for="inputUserName2" class="col-sm-2 control-label">登录名</label>
              <div class="col-sm-10">
                <input name="username" type="text" class="form-control" id="inputUserName2" autocomplete="off">
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword2" class="col-sm-2 control-label">密码</label>
              <div class="col-sm-10">
                <input name="password" type="password" class="form-control" id="inputPassword2" autocomplete="off">
              </div>
            </div>
            <div class="form-group">
              <label for="inputAdmin2" class="col-sm-2 control-label">身份权限</label>
              <div class="col-sm-10">
                <select name="admin" class="form-control" id="inputAdmin2">
                  <option value="0" text="普通">普通</option>
                  <option value="1" text="管理员">管理员</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button id="doAdd" type="button" class="btn btn-success submit">提交</button>
                <button type="reset" class="btn btn-warning">清空输入</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <!-- Modal -->
    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="userModalLabel">职工号</h4>
          </div>
          <div class="modal-body">
            <form id="userForm" class="form-horizontal">
              <div class="form-group">
                <label for="inputName" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input name="realname" type="text" class="form-control" id="inputName" placeholder="读取错误"
                         autocomplete="off">
                  <input name="user_id" type="hidden" class="form-control" id="inputUserId">
                </div>
              </div>
              <div class="form-group">
                <label for="inputUserName" class="col-sm-2 control-label">登录名</label>
                <div class="col-sm-10">
                  <input name="username" type="text" class="form-control" id="inputUserName" placeholder="读取错误"
                         autocomplete="off">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10" data-toggle="tooltip" data-placement="top" title="不修改请留空">
                  <input name="password" type="password" class="form-control" id="inputPassword" placeholder="不修改请留空"
                         autocomplete="off">
                </div>
              </div>
              <div class="form-group">
                <label for="inputAdmin" class="col-sm-2 control-label">身份权限</label>
                <div class="col-sm-10">
                  <select name="admin" class="form-control" id="inputAdmin">
                    <option value="0" text="普通">普通</option>
                    <option value="1" text="管理员">管理员</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button id="delUserBtn" type="button" class="btn btn-danger btn-sm" style="float: left"
                    data-toggle="tooltip" data-placement="right" title="慎重!这将会删除该用户">删除
            </button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="saveChange" type="button" class="btn btn-primary">修改</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<include file="./Public/Tpl/footer.html"/>
<script>
    var size = 10;
    var page = 1;
    var userList = {list: [], count: 10};
    var app = new Vue({
        el: '#userList',
        data: userList
    });
    function loadList(size, page) {
        $.ajax({
            type: 'POST',
            url: "{:U('user/getUserList')}",
            data: {"size": size, "page": page},
            dataType: 'json',
            async: false,
            success: function (rs) {
                if (rs.code == 200) {
                    userList.list = rs.data.list;
                    userList.count = Math.ceil(rs.data.count / size);
                }
            },
            beforeSend: function () {
                this.layerIndex = layer.load(1, {shade: [0.1, '#393D49']});
            },
            complete: function () {
                layer.close(this.layerIndex);
            }
        });
    }
    $(document).ready(function () {
        //加载更多
        layui.use(['laypage', 'layer'], function () {
            loadList(size, page);
            layer = layui.layer;
            laypage = layui.laypage;
            laypage({
                cont: 'userPage'
                , pages: userList.count
                , skin: '#337ab7'
                , skip: true,
                jump: function (obj, first) {
                    if (!first) {
                        page = obj.curr;
                        loadList(size, page);
                    }
                }
            });
        });
        //点击库存列表填充模态框
        $("#userList").on("click", "tr", function (ev) {
            var tdData = $(this).find("td");
            $("#userModalLabel").html("员工编号: " + tdData[0].innerHTML);
            $("#inputUserId").attr("value", tdData[0].innerHTML);
            $("#inputName").attr("value", tdData[2].innerHTML);
            $("#inputUserName").attr("value", tdData[1].innerHTML);
            $("#inputAdmin").find("option[text='" + tdData[3].innerHTML + "']").attr("selected", true);
        });
        //响应保存提交事件
        $("#saveChange").on("click", function (ev) {
            var Password = $("#inputPassword").val();
            if (Password != "" && !confirm("您确定要修改密码为:" + Password + "吗?")) {
                return 0;
            }
            //提交事件
            var Form = $("#userForm");
            $.ajax({
                url: "{:U('User/doChangeInfo')}",
                data: Form.serialize(),
                dataType: "json",
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data['code'] == 200) {
                        $("#userModal").modal('toggle');
                        loadList(size, page);
                        Form[0].reset();
                        layer.msg("修改成功!", {icon: 1});
                    } else {
                        layer.msg("原因:" + data['msg'], {icon: 2});
                    }
                },
                error: function () {
                    layer.msg("提交过程中发生问题! 请联系管理员", {icon: 0});
                },
                beforeSend: function () {
                    this.layerIndex = layer.load(1, {shade: [0.1, '#393D49']});
                },
                complete: function () {
                    layer.close(this.layerIndex);
                }
            })
        });
        //响应删除用户
        $("#delUserBtn").on("click", function () {
            layer.confirm('确定要删除该用户？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                var Form = $("#userForm");
                $.ajax({
                    url: "{:U('User/delUser')}",
                    data: "do=delUser&" + Form.serialize(),
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        console.log(data);
                        if (data['code'] == 200) {
                            $("#userModal").modal('toggle');
                            loadList(size, page);
                            Form[0].reset();
                            layer.msg("删除了!", {icon: 1});
                        } else {
                            layer.msg("处理失败了!原因:" + data['msg'], {icon: 2});
                        }
                    },
                    error: function () {
                        layer.msg("提交过程中发生问题! 请联系管理员", {icon: 0});
                    }
                })
            }, function () {
            });
        });
        //新增用户
        $("#doAdd").on("click", function () {
            var Form = $("#addForm");
            $.ajax({
                url: "{:U('User/addUser')}",
                data: "do=addUser&" + Form.serialize(),
                dataType: "json",
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data['code'] == 200) {
                        loadList(size, page);
                        Form[0].reset();
                        layer.msg("新增成功！", {icon: 1});
                    } else {
                        layer.msg(data['msg'], {icon: 2});
                    }
                },
                error: function () {
                    layer.msg("提交过程中发生问题! 请联系管理员", {icon: 0});
                }
            })
        });
    });
</script>
</body>
</html>